<template>
  <div class="inside-page">
    <div class="pay">
      <h1>支付订单</h1>
      <h3>
        您可在「我的」-「订单中心」查看该订单，或前往「我的」-「加入双选会」继续报名更多双选会。
      </h3>
      <div class="pay-wrap">
        <div class="detail-title middle">订单明细</div>
        <div class="list-item" v-for="v in isChooseList" :key="v.id">
          <div class="top-wrap clearfix">
            <div class="logo">
              <img :src="v.images" />
            </div>
            <div class="text-wrap">
              <p class="name-wrap">
                <span class="title" :title="v.name">{{ v.name }}</span>
                <span
                  class="corner"
                  :class="[v.type === 0 ? 'online' : 'offline']"
                >
                  {{ v.type === 0 ? '线上专场' : '线下专场' }}
                </span>
              </p>
              <p class="pro">主办单位：{{ v.for_name }}</p>
              <div class="icon-wrap">
                <span class="time">
                  <i class="iconfont icon-time"></i>
                  <span>双选会时间：{{ v.start_time }} - {{ v.end_time }}</span>
                </span>
                <span class="address">
                  <i class="iconfont icon-map"></i>
                  <span v-if="v.type === 0">线上</span>
                  <span v-else>{{ v.address }}</span>
                </span>
              </div>
            </div>
            <p class="money">¥{{ v.amount }}</p>
          </div>
        </div>
        <div class="total-money">
          <p>
            实付款：<span>{{ money }}</span
            >元
          </p>
        </div>
      </div>
    </div>
    <div class="pay-wrap">
      <div class="detail-title middle">发票信息</div>
      <div class="choose-btn choose-need">
        <span>是否需要发票：</span>
        <button
          type="button"
          class="btn"
          :class="[need === 1 && 'active']"
          @click="need = 1"
        >
          需要
        </button>
        <button
          type="button"
          class="btn"
          :class="[need === 0 && 'active']"
          @click="need = 0"
        >
          不需要
        </button>
      </div>
      <div class="choose-btn choose-type" v-if="need === 1">
        <span>发票类型：</span>
        <button
          type="button"
          class="btn"
          :class="[type === 1 && 'active']"
          @click="type = 1"
        >
          增值税普通发票
        </button>
        <button
          type="button"
          class="btn"
          :class="[type === 2 && 'active']"
          @click="type = 2"
        >
          增值税专用发票
        </button>
      </div>
    </div>
    <div class="pay-wrap">
      <div class="invoice" v-if="need === 1">
        <div class="invoice-container clearfix">
          <div class="form-item middle">
            <p required>企业名称：</p>
            <div>
              <input type="text" v-model="cname" />
            </div>
          </div>
          <div class="form-item middle">
            <p required>纳税人识别号：</p>
            <div>
              <input type="text" v-model="business_number" />
            </div>
          </div>
          <div class="form-item">
            <p :required="type === 2">公司注册地址：</p>
            <div>
              <input type="text" v-model="address" />
            </div>
          </div>
          <div class="form-item">
            <p :required="type === 2">企业联系电话：</p>
            <div>
              <input type="text" v-model="phone" />
            </div>
          </div>
          <div class="form-item middle">
            <p :required="type === 2">开户银行：</p>
            <div>
              <input type="text" v-model="bank_name" />
            </div>
          </div>
          <div class="form-item middle">
            <p :required="type === 2">银行账号：</p>
            <div>
              <input type="text" v-model="bank_card" />
            </div>
          </div>
        </div>
        <!-- <div class="email form-item" v-if="type === 1"> -->
        <div class="email form-item">
          <p required>发票接收邮箱：</p>
          <div>
            <input type="text" v-model="email" />
          </div>
        </div>
        <div class="line" v-if="type === 2">发票寄送地址：</div>
        <div class="invoice-container address clearfix" v-if="type === 2">
          <div class="form-item middle">
            <p required>收件人名称：</p>
            <div>
              <input type="text" v-model="sh_name" />
            </div>
          </div>
          <div class="form-item middle">
            <p required>收件人手机号：</p>
            <div>
              <input type="text" v-model="sh_phone" />
            </div>
          </div>
          <div class="form-item">
            <p required>收件人地址：</p>
            <div>
              <input type="text" v-model="sh_address" />
            </div>
          </div>
        </div>
      </div>
      <div class="choose-pay">
        <p>支付方式：</p>
        <div class="img" :class="[pay === 0 && 'active']" @click="pay = 0">
          <img src="../../static/wx.png" alt="微信支付" />
        </div>
        <!-- 
        <div class="img" :class="[pay === 1 && 'active']" @click="pay = 1">
          <img src="../../static/alipay.png" alt="支付宝" />
        </div>
         -->
      </div>
    </div>
    <div class="submit">
      <button class="confirm" type="button" @click="submit">立即支付</button>
      <button class="cancel" type="button" @click="jumpTo(2)">取消订单</button>
    </div>
    <client-only>
      <el-dialog
        width="445px"
        :visible.sync="showConfirm"
        :show-close="false"
        custom-class="dialog-confirm"
      >
        <Is-Pay
          :pay="pay"
          :img-path="imgPath"
          @confirm="confirm"
          @cancel="cancel"
        />
      </el-dialog>
    </client-only>
  </div>
</template>

<script>
import { createPay, orderInfo, getOrderPay } from '@/api/order'
export default {
  asyncData: ({ req }) => ({
  }),
  components: {},
  data () {
    return {
      ids: '',
      isChooseList: [],
      need: 1,
      type: 1,
      pay: 0,
      money: 0,
      cname: '',
      business_number: '',
      address: '',
      phone: '',
      bank_name: '',
      bank_card: '',
      email: '',
      showConfirm: false,
      imgPath: '',
      subId: '',
      sh_name: '',
      sh_address: '',
      sh_phone: ''
    }
  },
  head () {
    return {
      titleTemplate: (titleChunk) => {
        return `${titleChunk} - 大学生找工作、找实习`;
      }
    }
  },
  created () {
    this.ids = this.$route.query.ids || '';
    this.fetchData();
  },
  mounted () {
  },
  watch: {

  },
  computed: {

  },
  methods: {
    jumpTo (index) {
      if (index === 1) {
        this.$router.push({
          path: '/success'
        })
      } else if (index === 2) {
        this.$router.go(-1)
      }
    },
    async fetchData () {
      await orderInfo({
        order_id: this.ids,
      }).then(res => {
        if (res.code === 200) {
          this.money = res.data.amount;
          this.isChooseList = res.data.list ? res.data.list : [res.data];
        } else {
          this.$message.error(res.msg);
        }
      }).catch(err => {
        console.error(err)
        this.$message.error(err);
      })
    },
    formPay (htmlForm) { // 支付宝
      const newWindow = window.open('', '_blank');
      newWindow.document.write(htmlForm);
      newWindow.focus();
    },
    confirm () { // 查询支付状态
      getOrderPay({
        id: this.subId
      }).then(res => {
        if (res.code === 200) {
          if (res.data.status === 0) {
            this.$message.error('未完成支付！')
          } else {
            this.showConfirm = false;
            this.jumpTo(1);
          }
        } else {
          this.$message.error(res.msg);
        }
      }).catch(err => {
        console.error(err)
        this.$message.error(err);
      })
    },
    cancel () {
      this.showConfirm = false;
    },
    async submit () {
      if (!this.ids) {
        this.$message.warning('未获取到订单，请返回重试！');
        return
      }
      const cname = this.cname ? this.cname.trim() : '';
      const business_number = this.business_number ? this.business_number.trim() : '';
      const address = this.address ? this.address.trim() : '';
      const phone = this.phone ? this.phone.trim() : '';
      const bank_name = this.bank_name ? this.bank_name.trim() : '';
      const bank_card = this.bank_card ? this.bank_card.trim() : '';
      const email = this.email ? this.email.trim() : '';
      const sh_name = this.sh_name ? this.sh_name.trim() : '';
      const sh_phone = this.sh_phone ? this.sh_phone.trim() : '';
      const sh_address = this.sh_address ? this.sh_address.trim() : '';


      const paramsObj = {
        ids: `[${this.ids}]`,
        invoice: this.type,
        pay_type: this.pay
      }
      if (this.need === 1) { // 需要发票
        if (this.type === 1) { // 普通发票
          if (!cname || !business_number || !email) {
            this.$message.warning('请填写打*号的内容！');
            return
          }
        } else if (this.type === 2) { // 专用发票 - 全填
          if (!cname || !business_number || !address || !phone || !bank_name || !bank_card || !email || !sh_name || !sh_phone || !sh_address) {
            this.$message.warning('请填写打*号的内容！');
            return
          }
        }
      }
      if (this.need === 1) {
        paramsObj.invoice_push = JSON.stringify({
          cname, business_number, address, phone, bank_name, bank_card, email, sh_name, sh_phone, sh_address
        })
      }
      console.log(JSON.stringify(paramsObj))
      await createPay(paramsObj).then(res => {
        if (res.code === 200) {
          this.showConfirm = true;
          if (this.pay === 0) { // 微信
            this.imgPath = res.data.link;
          } else { // 支付宝
            this.formPay(res.data.pay_html);
          }
          this.subId = res.data.id
        } else {
          this.$message.error(res.msg);
        }
      }).catch(err => {
        console.error(err)
        this.$message.error(err);
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.inside-page {
  width: 100%;
  position: relative;
  .pay-wrap {
    width: 900px;
    margin: 0 auto;
  }
  .pay {
    width: 100%;
    padding-top: 50px;
    background: #f6f7f8;
    position: relative;
    h1 {
      line-height: 60px;
      font-size: 38px;
      color: $base-color;
      text-align: center;
    }
    h3 {
      font-size: 14px;
      color: #666;
      text-align: center;
      margin: 10px 0 40px 0;
    }
    .list-item {
      position: relative;
      min-height: 120px;
      padding: 20px 30px;
      margin: 10px auto;
      border: 1px solid #ebebeb;
      background: #fff;
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
      .logo {
        float: left;
        height: 74px;
        width: 74px;
        overflow: hidden;
        background: #fff;
        text-align: center;
        font-size: 0;
        border: 1px solid #ebebeb;
        img {
          height: 100%;
        }
      }
      .text-wrap {
        float: left;
        width: 680px;
        margin-left: 20px;
        position: relative;
        .name-wrap {
          width: 620px;
          line-height: 24px;
          .title {
            width: 580px;
            font-size: 18px;
            color: #24292f;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          .corner {
            vertical-align: top;
            display: inline-block;
            margin-left: 5px;
            margin-top: 5px;
            width: 70px;
            height: 22px;
            line-height: 20px;
            font-size: 12px;
            text-align: center;
            border-radius: 4px;
            &.online {
              background: rgba(71, 113, 220, 0.3);
              color: $base-color;
              border: 1px solid $base-color;
            }
            &.offline {
              background: rgba(252, 112, 62, 0.3);
              color: $base-color-important;
              border: 1px solid $base-color-important;
            }
          }
        }
        .pro {
          width: 600px;
          margin: 10px 0;
          font-size: 12px;
          color: #ccc;
        }
        .icon-wrap {
          .time,
          .address {
            margin-top: 10px;
            height: 20px;
            line-height: 20px;
            margin-right: 40px;
            i,
            span {
              margin-right: 5px;
              font-size: 14px;
              color: #999;
            }
          }
        }
      }
      .money {
        position: absolute;
        right: 30px;
        top: 50px;
        font-size: 24px;
        color: $base-color-danger;
      }
    }
    .total-money {
      margin: 0 auto;
      height: 70px;
      line-height: 70px;
      text-align: right;
      p {
        font-size: 14px;
        color: #24292f;
        span {
          margin: 0 20px;
          font-size: 28px;
          color: $base-color-danger;
        }
      }
    }
  }
  .choose-btn {
    height: 90px;
    line-height: 90px;
    &:first-child {
      border-bottom: 1px solid #ebebeb;
    }
    span {
      font-size: 18px;
      color: #24292f;
    }
    .btn {
      height: 40px;
      line-height: 38px;
      padding: 0 25px;
      margin: 0 20px;
      font-size: 18px;
      color: #999;
      border: 1px solid #999;
      border-radius: 4px;
      background: #fff;
      &.active,
      &:hover {
        border-color: $base-color;
        background: $base-color;
        color: #fff;
      }
    }
  }
  .invoice-container {
    margin: 10px 0;
    padding: 20px 30px 40px 30px;
    border: 1px dashed #999;
    border-radius: 8px;
  }
  .form-item {
    float: left;
    width: 100%;
    line-height: 40px;
    margin: 10px 0;
    &.middle {
      width: 50%;
      &:nth-child(2n-1) > div {
        margin-right: 20px;
      }
    }
    &:last-child {
      margin-bottom: 0;
    }
    p {
      padding-top: 10px;
      line-height: 30px;
      float: left;
      font-size: 18px;
      color: #24292f;
      margin-right: 5px;
      position: relative;
      &[required] {
        &::before {
          content: '*';
          position: absolute;
          left: -15px;
          top: 15px;
          color: $base-color-danger;
          font-size: 25px;
        }
      }
    }
    div {
      overflow: hidden;
      border-bottom: 1px solid #999;
      input {
        line-height: 40px;
        width: 100%;
        border: 0;
        padding: 0 10px;
        font-size: 16px;
      }
    }
  }
  .email {
    float: none;
    height: 100px;
    padding: 25px 0 0 15px;
    margin: 30px 0;
    border-top: 1px solid #ebebeb;
    div {
      width: 35%;
    }
  }
  .line {
    height: 80px;
    line-height: 80px;
    font-size: 18px;
    color: #24292f;
    margin-top: 30px;
    border-top: 1px solid #ebebeb;
  }
  .address {
    margin-bottom: 30px;
  }
  .choose-pay {
    height: 170px;
    line-height: 170px;
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
    p {
      float: left;
      margin-right: 20px;
    }
    .img {
      cursor: pointer;
      float: left;
      margin-top: 45px;
      margin-right: 50px;
      height: 90px;
      width: 200px;
      line-height: 88px;
      font-size: 0;
      text-align: center;
      border: 2px solid #ebebeb;
      border-radius: 8px;
      &.active {
        border-color: $base-color;
      }
      img {
        max-width: 135px;
        vertical-align: middle;
      }
    }
  }
}
</style>
